<style scoped>
  .lanren .on {
    -webkit-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
  }

  @keyframes rotating {
    from {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  div.lanren {
    width: 12vw;
    height: 12vw;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 2vw;
    top: 7vh;
    z-index: 100;
  }

  .audio-btn {
    width: 10vw;
    height: 10vw;
  }
</style>
<template>
  <div class="lanren" :style="{'z-index':showCtrl?1000:0}">
    <img v-if="showCtrl" :src="isPlay?'http://rongyanstatic.oss-cn-shenzhen.aliyuncs.com/imgs/wap/music_on.png':'http://rongyanstatic.oss-cn-shenzhen.aliyuncs.com/imgs/wap/music_off.png'"
      class="audio-btn" :class="isPlay?'on':'off'" @click="change"/>
    <audio autoplay="autoplay" loop="loop" :src="url" id="media" preload="preload"></audio>
  </div>
</template>
<script>
  export default {
    name: 'myaudio',
    props: {
      url: { type: String, default: '' },
      showCtrl: { type: Boolean, default: false }
    },
    data () {
      return {
        isPlay: false
      }
    },
    created () {
    },
    mounted(){
      let vm =this;
      this.$nextTick(() => {
        setTimeout(function () {
          vm.isPlay = true
        },1000)

      })

    },
    methods: {
      change () {
        if (this.isPlay) {
          this.stop()
        } else {
          this.play()
        }

      },
      play () {
        let audio = document.querySelector('#media')
        if (!this.isPlay) {
          audio.play()
          this.isPlay = true
        }
      },
      stop () {
        let audio = document.querySelector('#media')
        if (this.isPlay) {
          audio.pause()
          this.isPlay = false
        }
      }
    }
  }
</script>
